<template>
	<div class="title">
		<p class="title_p">过户办理</p>
	</div>
	<el-form :inline="true" class="search">
		<el-form-item label="卖家" prop="name">
			<el-input />
		</el-form-item><span>*</span>
		<el-form-item label="过户单号" prop="date">
			<el-input />
		</el-form-item><span>*</span><br>
		<el-form-item label="卖家" prop="address">
			<el-input />
		</el-form-item><span>*</span>
		<el-form-item label="过户日期" prop="address">
			<el-input />
		</el-form-item><span>*</span>
	</el-form>
	<div class="sel_btn">
		<el-button>选货</el-button>
	</div>
	<div class="title_p">过户货物明细</div>
	<el-table :data="tableData" style="width: 100%">
		<el-table-column prop="number" label="托盘编号" />
		<el-table-column prop="name" label="货物名称" />
		<el-table-column prop="spec" label="规格(公斤/件)" />
		<el-table-column prop="extant" label="现存件数" />
		<el-table-column prop="extract" label="提货件数" />
		<el-table-column prop="weight" label="出库重量(公斤)" />
		<el-table-column label="操作" width="120">
			<template #default="scope">
				<el-button type="text" size="small" @click.prevent="deleteRow(scope.$index)">
					删除
				</el-button>
			</template>
		</el-table-column>
	</el-table>
	<div class="title_info">
		<span>托盘个数：25</span>
		<span>总重量(公斤)：50</span>
	</div>
	<table class="table_down">
		<tr>
			<td colspan="7">备注</td>
		</tr>
		<tr>
			<td colspan="7"><textarea class="textarea_box"></textarea></td>
		</tr>
		<tr class="tfoot_td">
			<td><span>存储费</span><input type="text" /> 元</td>
			<td><span>其他费用</span><input type="text" /> 元</td>
			<td><span>合计应收</span><input type="text" /> 元</td>
			<td colspan="4"><span>合计实收</span><input type="text" /> 元</td>
		</tr>
		<tr>
			<td colspan="2" class="btn_td">
				<el-button class="btn_sum">结算费用</el-button>
				<el-button class="btn_reset">重置</el-button>
			</td>
		</tr>
	</table>
</template>
<script lang="ts" setup>
	import {
		ref
	} from 'vue'
	const tableData = ref([{
		number: '231342',
		name: '鸡蛋',
		spec: '13',
		extant: '12',
		extract: '2',
		weight: '46',
	}, {
		number: '123577',
		name: '苹果',
		spec: '23',
		extant: '13',
		extract: '2',
		weight: '23',
	}, {
		number: '224352',
		name: '青椒',
		spec: '6',
		extant: '23',
		extract: '2',
		weight: '17',
	}, {
		number: '431344',
		name: '榴莲',
		spec: '43',
		extant: '9',
		extract: '2',
		weight: '23',
	}, ])
	const deleteRow = (index: number) => {
		tableData.value.splice(index, 1)
	}
</script>
<style>
	.btn_sum {
		background: #1a71b4;
		color: #fff;
		margin-left: 82px;
	}

	.btn_reset {
		background: #dcdee0;
		color: #333;
		margin-left: 20px;
	}

	.table_down {
		width: 100%;
		border: 1px solid #e8e9ea;
	}

	.table_down .textarea_box {
		margin-left: 32px;
	}

	.table_down .tfoot_td {
		height: 46px;
	}

	.table_down .tfoot_td td {
		border-right: 1px solid #e8e9ea;
	}

	.table_down .tfoot_td td:last-child {
		border-right: none;
	}

	.table_down input {
		width: 93px;
		height: 28px;
		padding-left: 5px;
		border: 1px solid #cbced0;
		margin-left: 15px;
	}

	.table_down .btn_td {
		height: 72px;
	}

	.textarea_box {
		width: 590px;
		height: 126px;
		border-color: #cbced0;
		margin-top: 15px;
		margin-bottom: 12px;
	}

	.table_down tr {
		height: 38px;
	}

	.table_down tr td {
		padding: 0 15px;
	}

	.table_down tr td {
		font-size: 14px;
		color: #666;
		border-bottom: 1px solid #e8e9ea;
		padding-left: 16px;
	}

	.table_down tr:last-child td {
		border-bottom: none;
	}

	.title_info {
		font-size: 14px;
		line-height: 38px;
		padding-left: 14px;
		color: #1A71B4;
		font-weight: 900;
	}

	.title_info span:first-of-type {
		padding-right: 50px;
	}

	.sel_btn .el-button {
		background: #dbdee0;
		color: #333;
		border-radius: 0;
		height: 28px;
	}

	.sel_btn {
		margin: 10px 0;
	}

	.el-table--fit,
	.title_info {
		border-left: 1px solid #e8e9ea;
		border-right: 1px solid #e8e9ea;
	}

	.search span {
		margin-right: 20px;
		color: rgb(235, 90, 18);
	}

	.search .el-form-item {
		margin-bottom: 10px;
		margin-right: 10px;
	}

	.title_p {
		font-size: 14px;
		color: #2e6095;
		line-height: 38px;
		background: #f8f8f8;
		padding-left: 14px;
		border: 1px solid #e8e9ea;
	}

	.title {
		margin-bottom: 10px;
	}

	.search {
		padding: 10px 0 0 14px;
		border: 1px solid #e8e9ea;
		background-color: #F8F8F8;
	}
</style>


